import Vue from 'vue'
import { addClass } from '@/global/utils/index'
/**
* 列表页面选择对话框
* listviewurl：列表页面视图URL
* exclude-fields: 排除列表字段属性名称，多值使用“,”分隔
* dialog-title：对话框标题
* multiple: 是否可以多选，默认为否
*/
Vue.directive('listpage-dialog', {
    attrs: null,
    inserted(el, binding, vnode) {
        el.attrs = vnode.data.attrs

        const openSelectDialog = () => {
            if (vnode.data.model === undefined) {
                vnode.data.model = { 'expression': 'listpageDialog' }
            }
            vnode.context.$bus.emit('openListpageDialog', el, binding, vnode)
        }

        if (el.innerHTML.indexOf('class="el-icon-more"') !== -1) {
            return
        } else if (el.tagName === 'BUTTON' || el.tagName === 'A') {
            el.removeEventListener('click', openSelectDialog)
            el.addEventListener('click', openSelectDialog)
            return
        }

        const groupDiv = document.createElement('div')
        addClass(groupDiv, 'el-input-group')
        addClass(groupDiv, 'el-input-group--append')

        const btn = document.createElement('div')
        btn.className = 'el-input-group__append'
        btn.innerHTML = '<button type="button" class="el-button el-button--default el-button--medium"><!----><i class="el-icon-more"></i><!----></button>'
        btn.addEventListener('click', openSelectDialog)

        for (let i = 0; i < el.children.length; i++) {
            groupDiv.appendChild(el.children[i])
        }
        groupDiv.appendChild(btn)

        el.innerHTML = ''
        el.appendChild(groupDiv)
    },
    update(el, binding, vnode, oldVnode) {
        el.attrs = vnode.data.attrs
    }
})

